<template>
  <div class>
    <div class="header">
      <div class="title">
        <i-icon type="return" @click="backToUserCenter" i-class="healthFileBackIcon" />我的医生
      </div>
    </div>
    <i-tabs :current="current" @change="handleChange">
      <i-tab key="0" title="档案信息"></i-tab>
      <i-tab key="1" title="就诊记录"></i-tab>
    </i-tabs>
    <fileInformation v-if="current === 0"></fileInformation>
    <medicalInformation v-else></medicalInformation>
  </div>
</template>

<script>
import medicalInformation from "./components/medicalInformation";
import fileInformation from "./components/fileInformation";
export default {
  name: "",
  components: {
    medicalInformation,
    fileInformation
  },
  data() {
    return {
      current: 0
    };
  },
  methods: {
    handleChange({ target: { key } }) {
      console.log(key);
      this.current = parseInt(key);
    },
    backToUserCenter() {
      this.$router.back();
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 150rpx;
  background-color: #f3f1f4;
  box-sizing: border-box;
  padding: 0 20rpx;
  position: relative;
  .title {
    display: inline-block;
    margin-top: 40rpx;
    width: 100%;
    color: #000000;
    line-height: 60rpx;
    height: 60rpx;
    font-size: 36rpx;
  }
}
</style>
<style lang="scss">
.healthFileBackIcon {
  display: inline-block !important;
  font-size: 18px !important;
  line-height: 60rpx !important;
  height: 60rpx !important;
  vertical-align: baseline !important;
}
</style>